<template>
  <div class="login-container">
    <div class="header"></div>
    <div class="main">
      <div class="login-content">
        <div class="logo-container flex-center">
          <div>
            <div class="flex-center">
              <div class="logo"></div>
              <div class="title">{{ title }}</div>
            </div>
            <div class="flex-center">
              <div class="info">{{ info }}</div>
            </div>
          </div>
        </div>
        <div class="login-form">
          <el-form ref="$loginForm" :model="account" :rules="loginFormRules" :status-icon="false">
            <el-form-item prop="username">
              <el-input ref="$username" v-model="account.username" placeholder="用户名" clearable>
                <template #prefix>
                  <el-icon class="input-icon"><user-icon /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input @keyup.enter="login" ref="$password" v-model="account.password" placeholder="密码" class="input" clearable show-password>
                <template #prefix>
                  <el-icon class="input-icon"><lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <div class="tool-container">
              <el-checkbox v-model="rememberMe" label="记住密码"/>
              <div class="forget-password">忘记密码?</div>
            </div>
            <el-form-item>
              <el-button class="login" type="primary" :loading="loading" @click="login">登 陆</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="info flex-center">
        <div>{{ footerInfo }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login"
}
</script>

<script setup>
import {reactive, ref, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import { setRememberMeInfo, getRememberMeInfo, removeRememberMeInfo } from '@/utils/auth'
import { ElMessage } from 'element-plus'
import { User as UserIcon } from '@element-plus/icons'

const title = ref(process.env.VUE_APP_TITLE)
const info = ref('高质量控制管理系统')
const footerInfo = ref('Copyright © 2021 哈尔滨诺信工大测控技术有限公司')

const loginFormRules = reactive({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'change' },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'change' }
  ]
})
const account = reactive({
  username: '',
  password: ''
})
const rememberMe = ref(false)

const $username = ref(null)
const $password = ref(null)
onMounted(() => {
  if (account.username === '') {
    $username.value.focus()
  } else if (account.password === '') {
    $password.value.focus()
  }
  const rememberMeInfo = getRememberMeInfo()
  account.username = rememberMeInfo['username'] ? rememberMeInfo['username'] : ''
  account.password = rememberMeInfo['password'] ? rememberMeInfo['password'] : ''
  rememberMe.value = rememberMeInfo['rememberMe'] === 'true'
})

const $loginForm = ref(null)
const loading = ref(false)
const store = useStore()
const router = useRouter()
const route = useRoute()
let redirectPath = ''
let redirectQuery = {}
const getQuery = (query) => {
  return Object.keys(query).reduce((acc, cur) => {
    if (cur !== 'redirect') {
      acc[cur] = query[cur]
    }
    return acc
  }, {})
}
const getRedirectInfo = () => {
  const routeQuery = route.query
  if(routeQuery) {
    redirectPath = routeQuery.redirect
    redirectQuery = getQuery(routeQuery)
  }
}
const setRememberMe = () => {
  if (rememberMe.value) {
    setRememberMeInfo({
      'username': account.username,
      'password': account.password,
      'rememberMe': rememberMe.value
    })
  } else {
    removeRememberMeInfo()
  }
}
const login = () => {
  loading.value = true
  $loginForm.value.validate(async valid => {
    if (valid) {
      setRememberMe()
      try{
        await store.dispatch('user/login', account)
        getRedirectInfo()
        router.push({
          path: redirectPath || '/',
          query: redirectQuery
        })
      } catch (e) {
        console.log('登陆异常：', e)
        const message = typeof e === 'string' ? e : e.message
        ElMessage({
          type: 'error',
          message: message,
          center: true,
          duration: 2000
        })
      } finally {
        loading.value = false
      }
    } else {
      loading.value = false
      return false
    }
  })
}
</script>

<style lang="sass">
.login-container
  .el-checkbox__inner
    width: 18px
    height: 18px
  .el-checkbox__inner::after
    width: 4px !important
    height: 9px !important
    left: 5px
    border: 2px solid #fff
    border-left: 0
    border-top: 0
  .el-checkbox__label
    font-size: 16px
</style>

<style scoped lang="sass">
.login-container
  background: url(".././assets/background.svg") no-repeat bottom
  height: 100%
  display: flex
  flex-direction: column
  .header
    flex: none
    height: 64px
    //background-color: #ffd04b
  .main
    height: 0
    flex: 1
    //background-color: #f56c6c
    .login-content
      width: 350px
      height: 100%
      margin: 0 auto
      //background-color: #f5f7fa
      .logo-container
        padding-top: 30px
        margin-bottom: 20px
        //background-color: #67c23a
        &>div
          .logo
            display: inline-block
            width: 50px
            height: 50px
            margin-right: 5px
            background: url(".././assets/logo.png") no-repeat
            background-size: cover
          .title
            display: inline-block
            font-size: 24px
            color: #303133
          .info
            color: #808695
            margin-top: 10px

      .login-form
        height: 256px
        .input-icon
          width: 25px
          height: 100%
          display: flex
          justify-content: center
          align-items: center
        .tool-container
          font-size: 16px
          display: flex
          justify-content: space-between
          align-items: center
          margin-bottom: 18px
          .forget-password
            color: #57a3f3
        .login
          font-size: 16px
          width: 100%
          height: 40px

  .footer
    flex: none
    height: 150px
    color: #808695
    .info
      height: 100%
    //background-color: #67c23a
</style>
